<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>系统设置-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/resource/backend/css/font.css">
    <link rel="stylesheet" href="/resource/backend/css/weadmin.css">
    <script type="text/javascript" src="/resource/backend/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="weadmin-body">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                ${ range $key, $groups := .settings }$
                <li ${ if not $key }$class="layui-this" ${ end }$>${ $groups.Title }$</li>
                ${ end }$
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                ${ range $key, $groups := .settings }$
                <div class="layui-tab-item ${ if not $key }$layui-show${ end }$">
                    ${ range $config := $groups.Children }$

                    ${ if eq $config.Type "text" }$
                    <!-- 文本框开始 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 160px;">${ $config.Title }$</label>
                        <div class="layui-input-block" style="margin-left: 160px;">
                            <input type="text"
                                   name="${ $config.Name }$"
                                   value="${system_setting $config.Name}$"
                                   autocomplete="off"
                                   placeholder="${ $config.Tip }$"
                                   class="layui-input">
                        </div>
                    </div>
                    <!-- 文本框结束 -->
                    ${ end }$

                    ${ if eq $config.Type "password" }$
                    <!-- 密码框开始 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 160px;">${ $config.Title }$</label>
                        <div class="layui-input-block" style="margin-left: 160px;">
                            <input type="password"
                                   name="${ $config.Name }$"
                                   value="${system_setting $config.Name}$"
                                   autocomplete="off"
                                   placeholder="${ $config.Tip }$"
                                   class="layui-input">
                        </div>
                    </div>
                    <!-- 密码框结束 -->
                    ${ end }$

                    ${ if eq $config.Type "textarea" }$
                    <!-- 文本域开始 -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">${ $config.Title }$</label>
                        <div class="layui-input-block">
                            <textarea placeholder="${ $config.Tip }$"
                                      class="layui-textarea"
                                      name="${ $config.Name }$">${system_setting $config.Name}$</textarea>
                        </div>
                    </div>
                    <!-- 文本域结束 -->
                    ${ end }$
                    ${ if eq $config.Type "radio" }$
                    <!-- radio开始 -->
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label" style="width: 160px;">${ $config.Title }$</label>
                        <div class="layui-input-block" style="margin-left: 160px;">
                            ${ range $option := $config.Options }$
                            <input type="radio"
                                   name="${ $config.Name }$"
                                   value="${ $option.Value }$"
                                   title="${ $option.Title }$"
                                   ${ if eq (system_setting $config.Name) $option.Value }$ checked ${ end }$>
                            ${ end }$
                        </div>
                    </div>
                    <!-- radio结束 -->
                    ${ end }$
                    ${ if eq $config.Type "image" }$
                    <!-- 图片开始 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 160px;">${ $config.Title }$</label>
                        <div class="layui-input-block">
                            <input style="width: 60%;display: inline;" type="text" id="${ $config.Name }$_text"
                                   name="${ $config.Name }$" placeholder="点击上传图片按钮或手动输入图片路径"
                                   autocomplete="off" class="layui-input" value="${ system_setting $config.Name }$">
                            <button style="margin-left: -5px;margin-bottom: 3px;" type="button" class="layui-btn"
                                    id="${ $config.Name }$_button">
                                <i class="layui-icon"></i>
                                上传图片
                            </button>
                            <input class="layui-upload-file" type="file" accept="undefined" name="file">
                            <div class="layui-upload-list" style="margin-left: 50px;">
                                <img class="layui-upload-img" id="${ $config.Name }$_code"
                                     src="${ system_setting $config.Name }$" style="width: 100px;">
                            </div>
                        </div>
                        <script>
                            layui.use(['upload', 'jquery'], function () {
                                var upload = layui.upload;
                                var $ = layui.$;
                                //执行实例
                                var uploadInst = upload.render({
                                    elem: '#${ $config.Name }$_button' //绑定元素
                                    , url: '${ backend_api_url `/upload/single_image` }$' //上传接口
                                    , done: function (res) {
                                        //上传完毕回调
                                        if (res.code === 0) {
                                            $('#${ $config.Name }$_code').attr('src', res.data['url']);
                                            $('#${ $config.Name }$_text').val(res.data['url']);
                                        } else {
                                            layer.msg(res.message, {
                                                time: 3000,
                                                icon: 5
                                            });
                                        }
                                    }
                                    , error: function () {
                                        //请求异常回调
                                    }
                                });
                                /*图片放大预览*/
                                $('body').on('mouseenter', '.layui-upload-img', function () {
                                    //console.log('显示大图');
                                    var index = layer.open({
                                        type: 1,
                                        title: false,
                                        closeBtn: 0,
                                        area: '100',
                                        skin: 'layui-layer-nobg', //没有背景色
                                        shade: false,
                                        shadeClose: true,
                                        content: "<img style='max-width:600px;' src='" + $(this).prop('src') + "'>"
                                    });
                                });
                                $('body').on('mouseleave', '.layui-upload-img', function () {
                                    //console.log('取消显示大图');
                                    // layer.close(layer.index);
                                    layer.closeAll();
                                });
                            });
                        </script>
                    </div>
                    <!-- 图片结束 -->
                    ${ end }$

                    ${ end }$
                </div>
                ${ end }$
                <!--公共提交按钮-->
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
                </div>
                <!--公共提交按钮-->
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    layui.extend({
        admin: '{/}/resource/backend/js/admin',
    });
    layui.use(['jquery', 'element', 'form', 'util', 'admin', 'carousel'], function () {
        var element = layui.element,
            $ = layui.jquery,
            form = layui.form,
            carousel = layui.carousel,
            util = layui.util,
            admin = layui.admin;
        //建造实例
        carousel.render({
            elem: '.weadmin-shortcut'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , trigger: 'hover'
            , autoplay: false
        });

        carousel.render({
            elem: '.weadmin-notice'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , trigger: 'hover'
            , autoplay: true
        });

        form.on('submit(submit)', function (data) {
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //console.log(data.id)
            $.post('${ backend_api_url "/setting/save" }$', data.field, function (res) {
                console.log(res);
                if (res.code === 0) {
                    layer.msg(res.message, {
                        icon: 6
                        , time: 1000
                    });
                } else {
                    layer.msg(res.message, {
                        icon: 5
                        , time: 2000
                    });
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</html>